<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="${pageContext.request.contextPath}/res/jquery/jquery-3.5.1.js"></script>
    <script src="${pageContext.request.contextPath}/res/jquery/ajaxfileupload.js"></script>
</head>
<body>
<%--
enctype:
    application/x-www-form-urlencoded: 普通文本编码，不能用于文件
    multipart/form-data： 用于文件上传（二进制）将文件以二进制的形式上传

    method="post"
    enctype="multipart/form-data"
--%>


<h1>ajax文件上传，使用ajaxFileUpload 插件</h1>
<form  method="post" enctype="multipart/form-data" class="imageForm">
    <input type="file" name="myimage" class="myimage" id="myimage">
    <input type="button" value="提交" class="submitBtn">
</form>

<div class="preImg" style="display: none">  </div>

<script>
    $(".submitBtn").click(function (){


        <%--var url = "${pageContext.request.contextPath}/uploadSingleFileAjax";--%>
        var myimage = $(".imageForm").serialize();
        console.log(myimage);

        <%--$.ajaxFileUpload({--%>
        <%--    url:url,--%>
        <%--    dataType:"application/json",--%>
        <%--    secureuri:false,//是否启用安全机制--%>
        <%--    fileElementId:'myimage',--%>
        <%--    success:function (result){--%>
        <%--        console.log("result:" + result);--%>
        <%--        console.log("result:" + JSON.stringify(result));--%>
        <%--        var imgpath = "${pageContext.request.contextPath}" +"//"+result;--%>

        <%--        $(".preImg").show();--%>
        <%--        $(".preImg").html("");--%>
        <%--        var imgEle = ' <img src="'+imgpath+' " width="200px" height="200px">';--%>
        <%--        $(".preImg").append(imgEle);--%>
        <%--    }--%>
        <%--} )--%>





    }) ;
</script>

</body>
</html>
